<template>
  <div class="header-wrapper">
    <div class="content-wrapper">
      <div class="left">
        <div class="avatar">
          <img src="../../assets/knight.jpg" >
        </div>
      </div>
      <div class="right">
        <div class="name">{{user.userName}}</div>
        <div class="desc">多吃点<br><br>{{user.projectId}}</div>
      </div>
   <!--   <div @click="showinformation" class="clickinformation">
        个人信息修改
      </div>-->
    </div>
    <div @click="showaboutme" class="signature-wrapper">
      <div class="signature">
        永远年轻，永远热泪盈眶。
      </div>
    </div>
    <div class="background">
      <img width="100%" height="100%" src="../../assets/knight.jpg" alt="">
    </div>
    <infomationmd :user="user" ref="infomation"></infomationmd>
    <aboutme  ref="aboutmew"></aboutme>
  </div>
</template>

<script type="text/ecmascript-6">
  import infomationmd from '../infomationmd/infomationmd';
  import aboutme from '../infomationmd/aboutme';
  export default {
    props: {
      user: {
        type: Object
      }
    },
    data() {
      return {
        avatarimg: '../../assets/knight.jpg',
        fruit: 'apple',
        options: [
          { text: '苹果', value: 'apple' },
          { text: '香蕉', value: 'banana' },
          { text: '西瓜', value: 'watermelon' }
        ]
      };
    },
    components: {
      infomationmd,
      aboutme
    },
    methods: {
      showinformation() {
        // this.$refs.infomation.showinfomation();
      },
      showaboutme() {
        this.$refs.aboutmew.showaboutme();
      }
    }
  }
  ;
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .header-wrapper
    position relative
    padding-top 24px
    color #ffffff
    overflow hidden
    background-color rgba(7, 17, 27, 0.5)
    .content-wrapper
      display flex
      .left
        display inline-block
        flex 0 0 64px
        padding 0 16px 18px 24px
        .avatar
          display block
          height 64px
          width 64px
          img
            height 64px
            width 64px
            border-radius 4px
      .right
        flex 1
        .name
          font-size 16px
          font-weight bold
          line-height 18px
        .desc
          font-size 12px
          font-weight 200
          line-height 12px
          padding-top 8px
      .clickinformation
        padding 0 8px
        height 24px
        font-size 10px
        font-weight 100px
        font-size 12px
        border-radius 8px
        text-align center
        line-height 24px
        position absolute
        right 12px
        bottom 42px
        background rgb(0, 0, 0, 0.2)
    .signature-wrapper
      position relative
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 28px;
      background-color rgba(7, 17, 27, 0.2)
      .signature
        vertical-align top
        font-size 10px
        font-weight 200
        line-height 28px
        padding-right 4px
        padding-left 12px
    .background
      position absolute
      top 0
      left 0
      z-index -1
      filter blur(10px)
</style>
